<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华富</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<style>
  html,body {
    font-size: 1.2rem;
    background: #f5f5f5;
    color: #333333 !important
  }
  ul,ol{
    list-style: none;
    padding: 0px;
    margin: 0px;
  }

  .h10{
    width: 100%;
    height: 0.5rem;
    display: -webkit-box;
    clear: both;
    background: #f5f5f5
  }
    .aui-active .aui-bar-tab-label{
      color: #f5a51c
    }


    [v-cloak] {
        display: none;
    }
    header,.aui-bar,.aui-bar-nav{
      font-size: 1.2rem;
      color: #333 !important;
      background:#fff;
      box-shadow: 0rem 0rem 0.8rem 0rem
		rgba(126, 126, 126, 0.52);
    border-bottom: none;
    margin-top: 0 !important;
    }
    .aui-pull-left{
      font-size: 1.2rem;
    }
    .aui-pull-left .aui-iconfont{
      font-size: 1.2rem;

    }
    .aui-searchbar{
      background-color: transparent !important;
      height:4.4rem;
    }
    .aui-searchbar-input{
      height:2.8rem;
      line-height: 2.8rem;
      padding-left:0.9rem;
      margin: 0 0 0 3.3rem;
      border-radius: 0.3rem;
      position: relative;
    }

    .aui-bar-nav .aui-title{
      right: 4rem;
      left: 0rem;
    }

    /*滚动条样式*/
    .scrollbar-none::-webkit-scrollbar {/*滚动条宽度设置*/
        width: 0px;height: 0;
    }
    header, .aui-bar-nav{
      padding-top:0;
    }
    .aui-searchbar .aui-iconfont{
      line-height: 2.8rem;
      margin-right: 1rem;
      color: #9e9e9e !important;
      font-size: 1.6rem;
    }
    .aui-searchbar-input input{
      height: 2.8rem;
      font-size: 1.3rem;
    }
    .aui-bar-nav .aui-pull-right.class_nav{
      top:1.3rem;
      right:1.3rem;
      padding:0;
      height:1.6rem;
      line-height: 1.6rem;
    }
    .aui-bar-nav .aui-pull-left.class_nav1{
      top:1.3rem;
      left:1.3rem;
      padding:0;
      height:1.7rem;
      line-height: 1.7rem;
    }
    .class_nav img{
      height:1.7rem;
    }
    .class_nav1 img{
      height:1.7rem;
    }
    .class_nav span{
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      width: 1.2rem;
    	height: 1.2rem;
      line-height: 1.2rem;
    	background-color: #ed6a20;
      font-size:1rem;
      color:#fff;
      border-radius: 100%;
    }
    .class_nav_title .shao{
      position: absolute;
      width:1.3rem;
      top:0.75rem;
      right:0.75rem;
    }
    .con1{
      padding-top:6.9rem;
    }
    .fl{
      float:left;
    }
    .fr{
      float:right;
    }

    /*shop1_list*/
    .shop1_list{
      padding:1rem 1.3rem;
    }
    .shop1_list ul{
      background:#fff;
      padding:0.8rem;
      box-shadow: 0rem 0.1rem 1.37rem 0.09rem
    		rgba(28, 28, 28, 0.06);
    	border-radius: 0.7rem;
    }
    .shop1_list ul li{
      margin-bottom: 1rem;
    }
    .shop1_list ul li:last-child{
      margin-bottom: 0;
    }
    .shop1_list1_left1{
      width:3.5rem;
    }
    .shop1_list1_left2{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 3.5rem;
      margin-left: 0.65rem;
    }
    .shop1_list1_left2 h5{
      font-size: 1.4rem;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0.03rem;
    	color: #333333;
      line-height: 1;
    }
    .shop1_list1_left2 p{
      font-size: 1.2rem;
    	font-weight: normal;
    	font-stretch: normal;
    	line-height: 1;
    	letter-spacing: 0.03rem;
    	color: #333333;
    }
    .shop1_list1_right{
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 3.5rem;
    }
    .shop1_list1_right span{
      font-size: 1.4rem;
    	font-weight: normal;
    	font-stretch: normal;
    	line-height: 1;
    	letter-spacing: 0rem;
    	color: #de002b;
      padding:0.5rem 1.15rem;
      border-radius: 1.2rem;
	    border: solid 0.05rem #de002b;
    }
    /*shop1_list*/

</style>
<body>
<div id="app" style="position:relative;" v-cloak>

  <header id="header_top" class="aui-bar aui-bar-nav " style="position:fixed;top:0;height:6.9rem;padding-top:2.5rem;">

    <div class="aui-title class_nav_title">
      <div class="aui-searchbar" id="search">
          <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()" style="background:#f6f6f6">
              <i class="aui-iconfont aui-icon-search"></i>
              <form action="javascript:search();">
                  <input type="search" placeholder="搜索" id="search-input">
              </form>
              <div class="shao">
                <img src="../../image/search_icon1.png" alt="">
              </div>
          </div>

      </div>

    </div>
    <a class="aui-pull-right aui-btn class_nav">
        <img src="../../image/class/share_index_nav4.png" alt="">
    </a>
    <a class="aui-pull-left aui-btn class_nav1" onclick="close_win()">
        <img src="../../image/back.png" alt="">
    </a>
  </header>
  <div class="aui-refresh-content">
    <div class="con1">
        <div class="shop1">
          <div class="shop1_list">
            <ul>
              <li>
                <div class="shop1_list1 clearfix">
                  <div class="shop1_list1_left fl clearfix">
                    <div class="shop1_list1_left1 fl">
                      <img src="../../image/class/class_shop_nav6.png" alt="" width="100%">
                    </div>
                    <div class="shop1_list1_left2 fr">
                      <h5>天天生鲜旗舰店</h5>
                      <p>20.9万人关注</p>
                    </div>
                  </div>
                  <div class="shop1_list1_right fr">
                    <span>关注</span>
                  </div>
                </div>
              </li>
              <li>
                <div class="shop1_list1 clearfix">
                  <div class="shop1_list1_left fl clearfix">
                    <div class="shop1_list1_left1 fl">
                      <img src="../../image/class/class_shop_nav6.png" alt="" width="100%">
                    </div>
                    <div class="shop1_list1_left2 fr">
                      <h5>天天生鲜旗舰店</h5>
                      <p>20.9万人关注</p>
                    </div>
                  </div>
                  <div class="shop1_list1_right fr">
                    <span>关注</span>
                  </div>
                </div>
              </li>
              <li>
                <div class="shop1_list1 clearfix">
                  <div class="shop1_list1_left fl clearfix">
                    <div class="shop1_list1_left1 fl">
                      <img src="../../image/class/class_shop_nav6.png" alt="" width="100%">
                    </div>
                    <div class="shop1_list1_left2 fr">
                      <h5>天天生鲜旗舰店</h5>
                      <p>20.9万人关注</p>
                    </div>
                  </div>
                  <div class="shop1_list1_right fr">
                    <span>关注</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
    </div>
	</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>


<script type="text/javascript">
var app;
function doSearch(){
    var searchValue = document.getElementById("search-input").value;
    if(searchValue){
        api.toast({
            msg: searchValue,
            duration: 2000,
            location: 'bottom'
        });

    }
}
  apiready = function(){

    app = new Vue({
        el: '#app',
        data: {

        },
        created: function() {
          api.showProgress({
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });

        },
        methods: {

        },
        mounted: function () {
          api.hideProgress();
          setRefresh();
        }
      })

  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }

  function close_win(){
    api.closeWin({});
  }


</script>
